<script setup>
import { ref } from 'vue'
import { newsAdd, newPictures } from '@/api/news.js'

// 新闻栏目下拉框
const options = [
  { label: '政治', value: '政治' },
  { label: '经济', value: '经济' },
  { label: '科技', value: '科技' },
  { label: '社会', value: '社会' },
  { label: '娱乐', value: '娱乐' },
  { label: '文化', value: '文化' },
  { label: '健康', value: '健康' },
  { label: '科学', value: '科学' },
  { label: '体育', value: '体育' },
  { label: '教育', value: '教育' },
  { label: '国际', value: '国际' },
  { label: '环境', value: '环境' },
  { label: '习言道', value: '习言道' },
  { label: '战略军事', value: '战略军事' },
  { label: '人文历史', value: '人文历史' }
]

// 默认数据
const defaultForm = {
  newsId: '', // 新闻id
  title: '', // 标题
  userId: '19580768636', // 用户id
  newsType: '', // 栏目
  number: 0, // 浏览量
  cover: null, // 封面
  publishTime: '', // 发布时间
  newsContent: '', // 新闻内容
  author: '' // 作者
}

// 准备数据
const formModel = ref({ ...defaultForm })

// 图片
const imgURL = ref('')
const onSelectImg = async (uploadFile) => {
  const file = new FormData()
  file.append('file', uploadFile.raw)
  const res = await newPictures(file)
  imgURL.value = res.data
  formModel.value.cover = res.data
  console.log(formModel.value.cover)
}

// 添加新闻
const onPublish = async () => {
  console.log(formModel.value)
  await newsAdd(formModel.value)
  ElMessage.success('添加成功')
}

const editorRef = ref()

// 富文本编辑器工具箱
const editorOptions = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'image', 'video'],
      ['clean']
    ]
  },
  placeholder: '请输入内容...',
  theme: 'snow'
}
</script>

<template>
  <div class="big-box">
    <!-- 头部背景图片 -->
    <div class="background">
      <img src="/src/assets/user_background.png" class="image" />
      <div class="gradient-layer"></div>
    </div>
    <!-- 头部背景文字 -->
    <div class="background-text">
      第三届“一带一路” <br />
      国际合作高峰论坛
    </div>
    <div class="user-box">
      <div class="user-head">
        <div>
          <el-form :model="formModel" label-position="top" class="form">
            <div style="display: flex; justify-content: center">
              <el-form-item prop="title">
                <input
                  v-model="formModel.title"
                  placeholder="请输入新闻标题"
                  class="title"
                />
              </el-form-item>
            </div>
            <el-form-item label="选择分类" prop="newsType">
              <el-select v-model="formModel.newsType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="文章内容" prop="newsContent">
              <div class="editor">
                <!-- 富文本编辑 -->
                <QuillEditor
                  ref="editorRef"
                  v-model:content="formModel.newsContent"
                  content-type="html"
                  theme="snow"
                  :options="editorOptions"
                ></QuillEditor>
              </div>
            </el-form-item>
            <el-form-item label="文章封面" prop="cover">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="onSelectImg"
              >
                <img v-if="imgURL" :src="imgURL" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button @click="onPublish()" type="primary">发布新闻</el-button>
              <el-button type="info">草稿</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.big-box {
  display: flex;
  flex-direction: column; /*主轴方向为垂直方向*/
  align-items: center;
}
.background {
  position: relative;
  height: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #f4f4f4, rgba(255, 255, 255, 0));
}

.background-text {
  position: absolute;
  top: 100px;
  font-family: 'Your-Artistic-Font', cursive;
  font-size: 45px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 3px 5px 4px rgba(15, 64, 245, 0.61);
}

.user-box {
  position: absolute;
  top: 300px;
  padding: 20px;
  width: 1350px;
}

.user-head {
  display: flex;
  background-color: white;
  border-radius: 15px;
  padding: 30px 200px;
  height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.form div {
  margin: 10px 0;
}

.title {
  font-size: 30px;
  text-align: center;
  border-width: 0px 0px 2px 0px;
  border-radius: 5px;
  height: 40px;
  width: 500px;
}

.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
